<template>
  <div class="box-content">
    <a-form-model class="form" :model="form" style="overflow: hidden">
      <a-row>
        <a-col :span="24">
          <a-form-model-item label="通知标题" required>
            <a-input v-model="form.title" placeholder="请输入通知标题" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="发布时间">
            <a-date-picker show-time v-model="form.date" style="width: 100%" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="发布单位" required>
            <a-input v-model="form.unit" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="12">
          <a-form-model-item label="征集日期">
            <a-range-picker style="width: 100%" v-model="form.date1" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-form-model-item label="发布范围" required>
        <a-checkbox-group :options="plainOptions" />
      </a-form-model-item>
      <a-form-model-item label="通知内容" required>
        <a-textarea placeholder="通知内容" :rows="8" style="height: 400px" />
      </a-form-model-item>
      <a-form-model-item label="附件" style="margin: 15px 0px">
        <a-upload
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
          :multiple="true"
          :file-list="fileList"
          @change="handleChange"
        >
          <a-button> <a-icon type="upload" /> Upload </a-button>
        </a-upload>
      </a-form-model-item>
      <a-form-model-item label="备注信息">
        <a-textarea :rows="8" style="height: 100px" />
      </a-form-model-item>
      <a-form-model-item label="短信提醒">
        <a-switch
          checked-children="开"
          un-checked-children="关"
          v-model="form.remind"
        />
      </a-form-model-item>
      <a-form-model-item label="短信内容" required v-if="form.remind">
        <a-textarea :rows="8" style="height: 100px" />
      </a-form-model-item>
      <div class="form-footer">
        <a-button type="primary" @click="onSubmit"> 发布 </a-button>
        <a-button type="primary" @click="onSubmit"> 暂存 </a-button>
        <a-button style="margin-left: 10px" @click="$router.back()">
          取消
        </a-button>
      </div>
    </a-form-model>
  </div>
</template>
<script>
export default {
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 16 },
      plainOptions: [
        { label: '党派', value: '党派' },
        { label: '团体', value: '团体' },
        { label: '专委会', value: '专委会' },
        { label: '界别', value: '界别' },
        { label: '当前届次委员', value: '当前届次委员' },
        { label: '往届委员', value: '往届委员' },
        { label: '机关工作人员', value: '机关工作人员' }
      ],
      form: {
        name: undefined,
        region: undefined,
        date1: undefined,
        delivery: false,
        type: undefined,
        resource: '',
        desc: '',
        remind: false
      },
      fileList: [
        {
          uid: '-1',
          name: 'xxx.png',
          status: 'done',
          url: 'http://www.baidu.com/xxx.png'
        }
      ]
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!', this.form)
    },
    handleChange(info) {
      let fileList = [...info.fileList]

      // 1. Limit the number of uploaded files
      //    Only to show two recent uploaded files, and old ones will be replaced by the new
      fileList = fileList.slice(-2)

      // 2. read from response and show file link
      fileList = fileList.map((file) => {
        if (file.response) {
          // Component will show file.url as link
          file.url = file.response.url
        }
        return file
      })

      this.fileList = fileList
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .ant-calendar-picker-input {
  line-height: 40px;
}
.box-content {
  padding-right: 20px;
}
</style>